<template>
	<u-popup :show="isShow" :round="round">
		<view class="popup-content">
			<view class="popup-title">
				<view class="popup-title-btn" @click="onCanacel">{{ leftBtnText }}</view>
				<view class="popup-title-text">{{ title }}</view>
				<view class="popup-title-btn" :style="rightBtnStyle" @click="onConfirm">{{ rightBtnText }}</view>
			</view>
			<slot></slot>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"ycy-popup",
		props: {
			autoClose: { type: Boolean, default: true },
			title: { type: String, default: '' },
			leftBtnText: { type: String, default: '取消' },
			rightBtnText: { type: String, default: '确定' },
			rightbtnColor: { type: String, default: '#007aff' },
			round: { type: Number, default: 10 }, 
		},
		data() {
			return {
				isShow: false
			};
		},
		computed: {
			rightBtnStyle() {
				return `color: ${ this.rightbtnColor }`;
			}
		},
		methods: {
			onCanacel() {
				this.isShow = false;
				this.$emit('onCanacel');
			},
			onConfirm() {
				if(this.autoClose) this.isShow = false;
				this.$emit('onConfirm');
			},
			open() {
				this.isShow = true;
			},
			close() {
				this.isShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.popup-content {
		padding: 0 $spacing-small;
		.popup-title {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: $spacing-small  0;
			
			.popup-title-text {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-weight: bold;
			}
			// .popup-title-btn {
			// 	letter-spacing: 2px;
			// }
		}
	}
</style>